<template>
  <div class="home">
    <header class="home__header">
      <!-- 导航栏 -->
      <van-nav-bar title="首页" @click-left="leftPanel">
        <template #left>
          <van-icon name="wap-nav" size="18" />
        </template>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
      <!-- 侧边栏 -->
      <van-popup v-model="showLeftPanel" position="left" :style="{ width: '50%', height: '100%' }">
        <p class="left__popup-title">TDF</p>
        <van-cell title="个人信息" is-link to="index" />
        <van-cell title="用户列表" is-link to="index" />
        <van-cell title="登出" is-link to="index" />
      </van-popup>
    </header>
    <div class="home__content">
      <!-- 轮播图 -->
      <my-swiper></my-swiper>
      <!-- 九宫格 -->
      <my-grid></my-grid>
      <!-- 用户信息列表 -->
      <user-list></user-list>
      <van-uploader v-model="fileList" multiple />
    </div>
  </div>
</template>

<script>
import * as UserAPI from "../api/userInfo";
import { MySwiper, MyGrid, MyHeader } from "@/components/index.js";
import UserList from "./UserList";

export default {
  name: "Home",
  components: {
    MySwiper,
    MyGrid,
    MyHeader,
    UserList
  },
  data() {
    return {
      showLeftPanel: false,
      fileList: []
    };
  },
  methods: {
    leftPanel() {
      this.showLeftPanel = true;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  &__header {
    .left__popup-title {
      padding: 10px 16px;
      font-size: 24px;
      font-weight: 700;
    }
  }
  &__content {
    .my-grid {
      margin: 20px 0;
    }
  }
}
</style>
